<template>
  <div class="child">
    <div class="shu">
      <div :class="{ 'shu-line-d': isFirst }" class="shu-line"></div>
      <div :class="{ 'shu-line-d': isLast }" class="shu-line"></div>
    </div>
    <div class="line" :class="{ lineEnd: !hasChildren }"></div>
    <div class="node">
      <div class="name">
        {{ treeData.name }}
      </div>
      <div><span class="name">参数1：</span>{{ treeData.date }}</div>
      <div><span class="name">参数2：</span>{{ treeData.address }}</div>
    </div>
    <div class="line" v-if="hasChildren"></div>

    <div class="child-box" v-if="hasChildren">
      <Child
        v-for="(item, index) in treeData.children"
        :key="item.id"
        :treeData="item"
        :isFirst="index === 0"
        :isLast="index === treeData.children.length - 1"
      />
    </div>
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  name: "Child",
  components: {
    Child,
  },
  props: {
    treeData: {
      type: Object,
      default: () => {},
    },
    isLast: {
      type: Boolean,
      default: false,
    },
    isFirst: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {};
  },
  computed: {
    hasChildren() {
      return this.treeData.children && this.treeData.children.length;
    },
  },
  created() {
    console.log(this.isFirst, this.isLast);
  },
};
</script>

<style lang="scss" scoped>
.child {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  .line {
    height: 1px;
    width: 100px;
    background-color: #303133;
  }
  .lineEnd {
    flex: 1;
  }

  .shu {
    height: 100%;
    display: flex;
    flex-direction: column;
    .shu-line {
      width: 1px;
      flex: 1;
      background-color: #303133;
    }
    .shu-line-d {
      background: transparent;
    }
  }
  .node {
    width: 200px;
    background-color: #f0f0f0;
    border-radius: 5px;
    font-size: 12px;
    color: #303133;
    border: 1px solid #303133;
    padding: 5px;
    .name {
      font-size: 14px;
      font-weight: 700;
    }
  }
  .child-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
</style>
